<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>重庆旅游网</title>

<!-- CSS -->
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png">

</head>

<body>

	<!-- Top content -->
	<div class="top-content">

		<div class="inner-bg">
			<div class="container">
				<div class="row">
					<div class="col-sm-8 col-sm-offset-2 text">
						<h1>
							<strong>重庆旅游网</strong> 游客注册
						</h1>
						<div class="description">
							<p>
								欢迎来到重庆旅游网！ <a href="#"><strong></strong></a>, customize and use
								it as you like!
							</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6 col-sm-offset-3 form-box">
						<div class="form-top">
							<div class="form-top-left">
								<h3>注册</h3>
							</div>
							<div class="form-top-right">
								<i class="fa fa-key"></i>
							</div>
						</div>
						<div class="form-bottom">
							<form class="form-horizontal" action="Register" method="post">
								<div class="form-group has-feedback" id="div1">
									<label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="email" id="text"
											placeholder="请输入注册邮箱"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden "></span>
									</div>
								</div>

								<div class="form-group has-feedback " id="div2">
									<label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
									<div class="col-sm-10">
										<input type="text" name="password" class="form-control"
											id="pwd" placeholder="请输入密码"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
									</div>
								</div>

									<div class="form-group has-feedback " id="div3">
									<label for="inputPassword3" class="col-sm-2 control-label">年龄:</label>
									<div class="col-sm-10">
										<input type="text" name="age" class="form-control"
											id="age" placeholder="请输入年龄"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
									</div>
								</div>

								<div class="form-group has-feedback " id="div4">
									<label for="inputPassword3" class="col-sm-2 control-label">姓名:</label>
									<div class="col-sm-10">
										<input type="text" name="name" class="form-control"
											id="name" placeholder="请输入姓名"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
									</div>
								</div>

								<div class="form-group has-feedback " id="div5">
									<label for="inputPassword3" class="col-sm-2 control-label">手机号:</label>
									<div class="col-sm-10">
										<input type="text" name="phone" class="form-control"
											id="phone" placeholder="请输入手机号"> <span
											class="glyphicon glyphicon-ok form-control-feedback hidden"></span>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-default">注册</button>

									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
		

	</div>



	<!-- Javascript -->
	<script src="assets/js/jquery-1.11.1.min.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/jquery.backstretch.min.js"></script>
	<script src="assets/js/scripts.js"></script>

	<!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
	<script>
		$(function() {

			var userReg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
			//
			//var pwdReg =  /^[a-zA-Z0-9]{6,10}$/;
			var pwdReg = /\S/;
			
			var phoneReg = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
			
			//匹配正则表达式
			validateForm($('#text'), userReg, $('#div1'));

			validateForm($('#pwd'), pwdReg, $('#div2'));
			
			validateForm($('#age'), pwdReg, $('#div3'));
			
			validateForm($('#name'), pwdReg, $('#div4'));
			
			validateForm($('#phone'), phoneReg, $('#div5'));
			

			function validateForm($obj, reg, $div) {

				$obj.on({
					//失去焦点是
					blur : function() {
						//得到表单内的值
						var val = $(this).val();
						//正则表达式匹配
						if (reg.test(val)) {
							//符合正则规则
							$(this).attr('index', '1');
							$div.addClass(" has-success");
							$div.removeClass(" has-error");
							$div.find($obj.next()[0]).removeClass(
									'glyphicon-remove');
						} else {
							//不符合正则
							$(this).attr('index', '0');
							$div.removeClass(" has-success");
							$div.addClass(" has-error");
							$div.find($obj.next()[0]).removeClass('hidden');
							$div.find($obj.next()[0]).addClass(
									'glyphicon-remove');
						}

					},

					focus : function() {

						$(this).val("");

					}

				})

			}

			$('button').click(function() {

				var att1 = parseInt($('#text').attr('index'));
				var att2 = parseInt($('#pwd').attr('index'));

				if (att1 && att2) {

					$('form').submit();

				}

				return false;

			})

		})
	</script>
</body>

</html>